<template>
  <div class="mainDiv">
    <TopHeader></TopHeader>
    <div class="mainTitle">
      <div class="container">
        <div class="title">学生登录</div>
        <div class="describe">填写个人信息</div>
      </div>
    </div>
    <div class="container">
      <div class="msgArea">
        <!-- 标题 -->
        <div class="tipTitle required">必填项</div>
        <!-- 选项 -->
        <div class="singleCho">
          <div class="fieldsName">姓名</div>
          <div class="choArea">
            <input type="text" v-model="studentMsg.name" placeholder="请输入姓名" />
          </div>
        </div>
        <div class="singleCho">
          <div class="fieldsName">性别</div>
          <div class="choArea">
            <div class="radioArea">
              <div :class="['radio', studentMsg.gender == '1' ? 'hasChoSex' : '']" @click="handleChoRadioSex('1')">
                <img v-if="studentMsg.gender == '1'" src="../assets/login/radio_checked.png" alt="">
                <img v-else src="../assets/login/radio_unchecked.png" alt="">
                <span>男</span>
              </div>
              <div :class="['radio', studentMsg.gender == '2' ? 'hasChoSex' : '']" @click="handleChoRadioSex('2')">
                <img v-if="studentMsg.gender == '2'" src="../assets/login/radio_checked.png" alt="">
                <img v-else src="../assets/login/radio_unchecked.png" alt="">
                <span>女</span>
              </div>
            </div>
          </div>
        </div>
        <div class="singleCho">
          <div class="fieldsName">入学年份</div>
          <div class="choArea">
            <div class="hasTipImage">
              <SelectOption modelName="入学年份" selectStyle="width: 224px" plhdText="请选择入学年份" :showList="inSchoolYearList" :showOptions="entrance_show" @handleOpenOptionList="handleOpenOptionList" @handleChoOptionValue="handleChoOptionValue" />
              <div class="tipIcon">
                <div class="iconImage">
                  <img src="../assets/login/icon_tip.png" alt="">
                </div>
                <div class="tipMsg">指你入学高一时的年份</div>
              </div>
            </div>
          </div>
        </div>
        <div class="singleCho">
          <div class="fieldsName">年级</div>
          <div class="choArea">
            <SelectOption modelName="年级" selectStyle="width: 224px" plhdText="请选择所在年级" :showList="gradeList" :showOptions="grade_show" @handleOpenOptionList="handleOpenOptionList" @handleChoOptionValue="handleChoOptionValue" />
          </div>
        </div>
        <div class="singleCho">
          <div class="fieldsName">班级</div>
          <div class="choArea">
            <SelectOption modelName="班级" selectStyle="width: 224px" plhdText="请选择所在班级" :showList="classList" :showOptions="class_show" @handleOpenOptionList="handleOpenOptionList" @handleChoOptionValue="handleChoOptionValue" />
          </div>
        </div>
        <div class="singleCho">
          <div class="fieldsName">民族</div>
          <div class="choArea">
            <SelectOption modelName="民族" selectStyle="width: 224px" plhdText="请选择所属民族" :showList="nationList" :showOptions="nation_show" @handleOpenOptionList="handleOpenOptionList" @handleChoOptionValue="handleChoOptionValue" />
          </div>
        </div>
        <div class="singleCho">
          <div class="fieldsName">出生</div>
          <div class="choArea">
            <div class="selectGroup">
              <SelectOption modelName="年份" selectStyle="width: 100px; margin-right: 16px;" plhdText="年份" :showList="bornYearList" :showOptions="bornYear_show" :vModel="bornYear" @handleOpenOptionList="handleOpenOptionList" @handleChoOptionValue="handleChoOptionValue" />

              <SelectOption modelName="月份" selectStyle="width: 100px; margin-right: 16px;" plhdText="月份" :showList="bornMonthList" :showOptions="bornMonth_show"  :vModel="bornMonth" :isCanOpenOption="monthOpenChoose" @handleOpenOptionList="handleOpenOptionList" @handleChoOptionValue="handleChoOptionValue" />

              <SelectOption modelName="日期" selectStyle="width: 100px;" plhdText="日期" :showList="bornDateList" :showOptions="bornDate_show" :isCanOpenOption="dateOpenChoose" @handleOpenOptionList="handleOpenOptionList" @handleChoOptionValue="handleChoOptionValue" />

            </div>
          </div>
        </div>
      </div>
      <div class="msgArea">
        <!-- 标题 -->
        <div class="tipTitle">选填项</div>
        <!-- 选项 -->
        <div class="singleCho">
          <div class="fieldsName">学号</div>
          <div class="choArea">
            <input type="text" v-model="studentNo" placeholder="请输入学号" />
          </div>
        </div>
        <div class="singleCho" style="align-items: flex-start;">
          <div class="fieldsName" style="margin-top: 11px;">备注</div>
          <div class="choArea">
            <textarea v-model="studentMsg.remark" maxlength="100" cols="30" rows="5" placeholder="请输入备注内容"></textarea>
          </div>
        </div>
      </div>
      <div class="warmTip">
        <div>准确且无误的填写以上资料，如有同名或特殊情况；</div>
        <div>请在选填的“备注”中按照老师要求填写；</div>
        <div>确认信息无误后点击“确定”进入下一步。</div>
      </div>
      <div class="comfirmBtn" @click="handleSubmit">确定</div>
    </div>
  </div>
</template>

<script>
import ls from 'store2'
import TopHeader from "~/components/topHeader";
import SelectOption from '~/components/SelectOption'
import axios from '~/plugins/axios'
import { Message, Loading } from 'element-ui';
export default {
  components: {
    TopHeader,
    SelectOption
  },
  data() {
    return {
      grade_show: false,
      class_show: false,
      entrance_show: false,
      nation_show: false,
      bornYear_show: false,
      bornMonth_show: false,
      bornDate_show: false,

      monthOpenChoose: false, // 是否选择了年份
      dateOpenChoose: false, // 是否选择了月份

      studentMsg: {
        name: '', // 姓名
        gender: '', // 性别 1 男 2 女
        grade_id: '', // 年级
        class_name: '', // 班级
        birth: '', // 生日
        nation: '', // 民族
        entrance: '', // 入学年份
        no: '', // 学号
        remark: '', // 备注信息
        school_id: ls.get('schoolId') || ''
      },
      studentNo: '',
      bornYear: 0, // 出生年份
      bornMonth: 0, // 出生月份
      bornDate: 0, // 出生日期
      gradeList: [{name: '高一', value: 1}, {name: '高二', value: 2}, {name: '高三', value: 3},],
      classList: [],
      nationList: [
        {name: '汉族', value: '汉族'}, {name: '蒙古族', value: '蒙古族'}, {name: '回族', value: '回族'}, {name: '藏族', value: '藏族'}, {name: '维吾尔族', value: '维吾尔族'},
        {name: '苗族', value: '苗族'}, {name: '彝族', value: '彝族'}, {name: '壮族', value: '壮族'}, {name: '布依族', value: '布依族'}, {name: '朝鲜族', value: '朝鲜族'},
        {name: '满族', value: '满族'}, {name: '侗族', value: '侗族'}, {name: '瑶族', value: '瑶族'}, {name: '白族', value: '白族'}, {name: '土家族', value: '土家族'},
        {name: '哈尼族', value: '哈尼族'}, {name: '哈萨克族', value: '哈萨克族'}, {name: '傣族', value: '傣族'}, {name: '黎族', value: '黎族'}, {name: '傈僳族', value: '傈僳族'},
        {name: '佤族', value: '佤族'}, {name: '畲族', value: '畲族'}, {name: '拉祜族', value: '拉祜族'}, {name: '水族', value: '水族'}, {name: '东乡族', value: '东乡族'},
        {name: '纳西族', value: '纳西族'}, {name: '景颇族', value: '景颇族'}, {name: '柯尔克孜族', value: '柯尔克孜族'}, {name: '土族', value: '土族'}, {name: '达斡尔族', value: '达斡尔族'},
        {name: '仫佬族', value: '仫佬族'}, {name: '羌族', value: '羌族'}, {name: '布朗族', value: '布朗族'}, {name: '撒拉族', value: '撒拉族'}, {name: '毛南族', value: '毛南族'},
        {name: '仡佬族', value: '仡佬族'}, {name: '锡伯族', value: '锡伯族'}, {name: '阿昌族', value: '阿昌族'}, {name: '普米族', value: '普米族'}, {name: '塔吉克族', value: '塔吉克族'},
        {name: '怒族', value: '怒族'}, {name: '乌兹别克族', value: '乌兹别克族'}, {name: '俄罗斯族', value: '俄罗斯族'}, {name: '鄂温克族', value: '鄂温克族'}, {name: '德昂族', value: '德昂族'},
        {name: '保安族', value: '保安族'}, {name: '裕固族', value: '裕固族'}, {name: '京族', value: '京族'}, {name: '塔塔尔族', value: '塔塔尔族'}, {name: '独龙族', value: '独龙族'},
        {name: '鄂伦春族', value: '鄂伦春族'}, {name: '赫哲族', value: '赫哲族'}, {name: '门巴族', value: '门巴族'}, {name: '珞巴族', value: '珞巴族'}, {name: '基诺族', value: '基诺族'},
        {name: '高山族', value: '高山族'}
      ],
      bornYearList: [],
      bornMonthList: [],
      bornDateList: [],
      inSchoolYearList: [],
      isRunYear: false, // 判断出生年份是否为闰年
      fullscreenLoading: false,
      regExp: /[0-9A-Za-z]{1,20}$/
    }
  },
  mounted() {
    this.createClassList()
    this.createBornYearList()
    this.createBornMonthList()
    this.createInSchoolYearList()
  },
  watch: {
    studentNo(string) {
      if (string.length > 1) {
        if (this.regExp.test(string)) {
          this.studentMsg.no = string
        } else {
          this.studentNo = this.studentMsg.no
        }
      } else {
        const newReg = /[0-9A-Za-z]$/ 
        if (!newReg.test(string)){
          this.studentNo = ''
          this.studentMsg.no = ''
        }
      }
    }
  },
  methods: {
    handleOpenOptionList(data) {
      if (data.name == '年级') {
        this.grade_show = data.show
        this.class_show = false
        this.entrance_show = false
        this.nation_show = false
        this.bornYear_show = false
        this.bornYear_show = false
        this.bornDate_show = false
      } else if (data.name == '入学年份') {
        this.entrance_show = data.show
        this.grade_show = false
        this.class_show = false
        this.nation_show = false
        this.bornYear_show = false
        this.bornYear_show = false
        this.bornDate_show = false
      } else if (data.name == '班级') {
        this.class_show = data.show
        this.entrance_show = false
        this.grade_show = false
        this.nation_show = false
        this.bornYear_show = false
        this.bornYear_show = false
        this.bornDate_show = false
      } else if (data.name == '民族') {
        this.nation_show = data.show
        this.class_show = false
        this.entrance_show = false
        this.grade_show = false
        this.bornYear_show = false
        this.bornYear_show = false
        this.bornDate_show = false
      } else if (data.name == '年份') {
        this.bornYear_show = data.show
        this.nation_show = false
        this.class_show = false
        this.entrance_show = false
        this.grade_show = false
        this.bornYear_show = false
        this.bornDate_show = false
      } else if (data.name == '月份') {
        this.bornMonth_show = data.show
        this.bornYear_show = false
        this.bornDate_show = false
        this.nation_show = false
        this.class_show = false
        this.entrance_show = false
        this.grade_show = false
      } else if (data.name == '日期') {
        this.bornDate_show = data.show
        this.bornMonth_show = false
        this.bornYear_show = false
        this.nation_show = false
        this.class_show = false
        this.entrance_show = false
        this.grade_show = false
      }
    },
    handleChoOptionValue(data) {
      const obj = data.data
      if (data.modelName == '年级') {
        this.grade_show = false
        this.studentMsg.grade_id = obj.value
      } else if (data.modelName == '入学年份') {
        this.entrance_show = false
        this.studentMsg.entrance = obj.value
      } else if (data.modelName == '班级') {
        this.class_show = false
        this.studentMsg.class_name = obj.value
      } else if (data.modelName == '民族') {
        this.nation_show = false
        this.studentMsg.nation = obj.value
      } else if (data.modelName == '年份') {
        this.bornYear_show = false
        this.bornYear = obj.value
        this.monthOpenChoose = true
        this.dateOpenChoose = false
        this.handleChangeBornYear(obj.value)
      } else if (data.modelName == '月份') {
        this.bornMonth_show = false
        this.bornMonth = obj.value
        this.dateOpenChoose = true
        this.handleChangeBornMonth(obj.value)
      } else if (data.modelName == '日期') {
        this.bornDate_show = false
        this.bornDate = obj.value
        this.handleChangeBornDate(obj.value)
      } 
    },

    // 选择性别
    handleChoRadioSex(gender) {
      this.studentMsg.gender = gender;
    },
    // 生成班级list集合
    createClassList() {
      let arr = []
      for (let i = 1; i < 100; i += 1) {
        const obj = {
          name: i + '班',
          value: i + '班',
        }
        arr.push(obj)
      }
      this.classList = arr
    },
    // 生成入学年份list集合
    createInSchoolYearList() {
      let arr = []
      for (let i = 2014; i <= 2050; i += 1) {
        const obj = {
          name: i,
          value: i,
        }
        arr.push(obj)
      }
      this.inSchoolYearList = arr
    },
    // 生成出生年份list集合
    createBornYearList() {
      let arr = []
      for (let i = 2000; i <= 2030; i += 1) {
        const obj = {
          name: i,
          value: i,
        }
        arr.push(obj)
      }
      this.bornYearList = arr
    },
    // 生成出生月份list集合
    createBornMonthList() {
      let arr = []
      for (let i = 1; i <= 12; i += 1) {
        const obj = {
          name: i,
          value: i,
        }
        arr.push(obj)
      }
      this.bornMonthList = arr
    },
    // 选择年份
    handleChangeBornYear(value) {
      if (value) {
        this.bornMonth = 0
        this.bornDate = 0
        this.isRunYear = this.isRun(value)
      }
    },
    handleChangeBornMonth(value) {
      if (value) {
        let n = 0
        if (value == 1 || value == 3 || value == 5 || value == 7 || value == 8 || value == 10 || value == 12) {
          n = 31
        } else if (value == 4 || value == 6 || value == 9 || value == 11) {
          n = 30
        } else if (value == 2) {
          n = this.isRunYear ? 29 : 28
        }
        this.createBornDateByYearAndMonth(n)
      }
    },
    handleChangeBornDate(value) {
      if (value) {
        this.studentMsg.birth = this.bornYear + '-' + this.bornMonth + '-' + value
      }
    },
    // 根据年份以及月份来生成日期列表
    createBornDateByYearAndMonth(num) {
      let arr = []
      for (let i = 1; i <= num; i += 1) {
        const obj = {
          name: i,
          value: i,
        }
        arr.push(obj)
      }
      this.bornDateList = arr
    },
    isRun(year){
      return (year%4==0 && year%100!=0) || year%400==0;
    },
    // 提交
    handleSubmit() {
      if (this.studentMsg.name == '') {
        Message.warning('请填入姓名');
      } else if (this.studentMsg.gender == '') {
        Message.warning('请选择性别');
      } else if (this.studentMsg.entrance == '') {
        Message.warning('请选择入学年份');
      } else if (this.studentMsg.grade_id == '') {
        Message.warning('请选择年级');
      } else if (this.studentMsg.class_name == '') {
        Message.warning('请选择班级');
      } else if (this.studentMsg.nation == '') {
        Message.warning('请选择民族');
      } else if (this.bornYear == '') {
        Message.warning('请选择出生年份');
      } else if (this.bornMonth == '') {
        Message.warning('请选择出生月份');
      } else if (this.bornDate == '') {
        Message.warning('请选择出生日期');
      } else {
        this.fullscreenLoading = Loading.service({ fullscreen: true })
        axios.post('/login', this.studentMsg).then(res => {
          Message.success('登录成功！')
          ls.set('tokens', res.token)
          this.$router.replace({ path: '../process' })
        }).catch(err => {
          Message.error(err.response.data.message)
        }).finally(() => {
          this.fullscreenLoading.close()
        })
      }
    }
  }
}
</script>

<style lang="less" scoped>
  @defaultColor: #1C2227;
  @importColor: #FF8A00;
  .mainDiv {
    padding-bottom: 100px;
    .mainTitle {
      width: 100%;
      height: 120px;
      border: 2px solid rgba(204,204,204,0.3);
      padding-top: 33px;
      .title {
        color: @defaultColor;
        font-size: 22px;
        line-height: 29px;
        font-weight: bold;
        margin-bottom: 8px;
      }
      .describe {
        color: #9E9E9E;
        font-size: 16px;
        line-height: 21px;
      }
    }
    .msgArea {
      padding-top: 40px; 
      .tipTitle {
        color: @defaultColor;
        font-size: 18px;
        font-weight: bold;
        line-height: 24px;
        padding-bottom: 16px;
        border-bottom: 2px solid #E5E8ED;
        margin-bottom: 30px;
      }
      .tipTitle.required {
        color: @importColor;
        border-color: @importColor;
      }
      .singleCho {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        margin-bottom: 32px;
        .fieldsName {
          color: @defaultColor;
          width: 70px;
          font-size: 16px;
          line-height: 16px;
          margin-right: 64px;
        }
        .choArea {
          input {
            width: 360px;
            height: 38px;
            padding: 11px 0 11px 15px;
            border-radius: 2px;
            outline: none;
            border: 1px solid #E1E4EB;
            color: @defaultColor;
            font-size: 14px;
            font-family: MicrosoftYaHei;
          }
          textarea {
            width: 360px;
            height: 152px;
            padding: 16px;
            font-size: 14px;
            color: @defaultColor;
            outline: none;
            border: 1px solid #E1E4EB;
            border-radius: 2px;
            font-family: MicrosoftYaHei;
            resize: none;
          }
          input:focus, textarea:focus {
            border-color: @importColor;
          }

          .radioArea {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            .radio {
              display: flex;
              justify-content: flex-start;
              align-items: center;
              margin-right: 30px;
              cursor: pointer;
              img {
                width: 14px;
                height: 14px;
                margin-right: 10px;
              }
              span {
                color: #263238;
                font-size: 14px;
                line-height: 14px;
              }
            }
            .radio.hasChoSex {
              span {
                color: @importColor;
              }
            }
          }
          .hasTipImage {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            .tipIcon {
              display: flex;
              justify-content: flex-start;
              align-items: center;
              .iconImage {
                width: 16px;
                height: 52px;
                line-height: 52px;
                margin-left: 13px;
                img {
                  width: 100%;
                  height: 16px;
                }
              }
              .tipMsg {
                display: none;
                width: 175px;
                height: 52px;
                line-height: 52px;
                background: url('../assets/login/pic_tip_ruxue.png') no-repeat 100% 100%;
                background-size: 100% 100%;
                color: #6F7880;
                font-size: 12px;
                padding-left: 19px;
              }
            }
            .tipIcon:hover {
              .tipMsg { display: block; }
            }
          }
          .selectGroup {
            display: flex;
            justify-content: flex-start;
            align-items: center;
          }
          /deep/ .el-input__inner, /deep/ .el-textarea__inner {
            color: @defaultColor;
          }
          /deep/ .el-select {
            outline: none;
          }
          /deep/ .el-input__inner:focus, /deep/ .el-textarea__inner:focus {
            border-color: @importColor;
          }
          /deep/ input::-webkit-input-placeholder, /deep/ textarea::-webkit-input-placeholder {
            color: #c7c7c7;
          }
          /deep/ input::-moz-input-placeholder, /deep/ textarea::-moz-input-placeholder {
            color: #c7c7c7;;
          }
          /deep/ input::-ms-input-placeholder, /deep/ textarea::-ms-input-placeholder {
            color: #c7c7c7;;
          }
        }
      }
    }
    .warmTip {
      margin-top: 50px;
      margin-bottom: 56px;
      color: #6F7880;
      font-size: 16px;
      line-height: 26px;
    }
    .comfirmBtn {
      width: 150px;
      height: 50px;
      line-height: 50px;
      text-align: center;
      border-radius: 2px;
      background: @importColor;
      color: #fff;
      font-size: 16px;
      margin: 0 auto;
      cursor: pointer;
    }
  }
  
</style>